<template>
  <div>
    <div class="head_top">
      <el-page-header @back="goBack" content="景点管理"></el-page-header>
    </div>

    <div class="form">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm">
        <el-form-item label="景点名称:" prop="s_name">
          <el-input v-model="ruleForm.s_name" placeholder="请输入名称"></el-input>
        </el-form-item>
        <el-form-item label="景点标题:" prop="s_title">
          <el-input v-model="ruleForm.s_title" placeholder="请输入标题"></el-input>
        </el-form-item>
        <el-form-item label="景点内容:" prop="s_content">
          <el-input
            type="textarea"
            placeholder="请输入内容"
            v-model="ruleForm.s_content"
            maxlength="80"
            show-word-limit
          >
          </el-input>
        </el-form-item>
        <el-form-item label="景点图片:" prop="s_icon">
          <el-upload
            class="avatar-uploader"
            :action="url"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload">
            <img v-if="ruleForm.s_icon" :src="ruleForm.s_icon" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="每天开放时间:" prop="s_open">
          <el-time-select
              placeholder="起始时间"
              v-model="ruleForm.s_open[0]"
              :picker-options="{
                start: '07:30',
                step: '00:15',
                end: '22:30'
              }">
            </el-time-select>
            <el-time-select
              placeholder="结束时间"
              v-model="ruleForm.s_open[1]"
              :picker-options="{
                start: '07:30',
                step: '00:15',
                end: '22:30',
                minTime: ruleForm.s_open[0]
              }">
            </el-time-select>
        </el-form-item>
        <el-form-item label="每周开放时间:" prop="s_week">
          <el-select v-model="ruleForm.s_week[0]" placeholder="请选择开始时间">
            <el-option
                v-for="item in week"
                :key="item"
                :label="item"
                :value="item">
            </el-option>
          </el-select>
          <el-select v-model="ruleForm.s_week[1]" placeholder="请选择结束时间">
            <el-option
                 v-for="item in week"
                 :key="item"
                 :label="item"
                 :value="item">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="每年开放时间:" prop="s_month">
          <el-row>
            <el-col :span="5">
              <el-input v-model="ruleForm.s_month[0]" placeholder="例如:1月1日"></el-input>
            </el-col>
            <el-col :span="1" style="text-align: center;">
              -
            </el-col>
            <el-col :span="5">
              <el-input v-model="ruleForm.s_month[1]" placeholder="例如:2月1日"></el-input>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item label="门票价格:">
          <el-row>
            <el-col :span="5">
              <el-input v-model="ruleForm.s_ticket" placeholder="请输入门票价格"></el-input>
            </el-col>
            <el-col :span="1" style="text-align: center;">元</el-col>
            <el-col :span="4" style="color:#FF5555">不填则为免费开放</el-col>
          </el-row>

        </el-form-item>
        <el-form-item label="景点地址:" prop="s_addressId">
          <el-cascader
            ref="myarea"
		        :options="options"
		        :change-on-select="true"
		        v-model="ruleForm.s_addressId"
		        expand-trigger="hover"
		        @change="handleChange">
	        </el-cascader>
        </el-form-item>
        <el-form-item label="详细地址:" prop="s_address">
          <el-input v-model="ruleForm.s_address" placeholder="请输入详细地址"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit('ruleForm')">立即提交</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
  import area from '../../js/area.js'
  export default{
    data(){
      var validate = (rule, value, callback) => {
        if(this.ruleForm.s_open[0]=='' || this.ruleForm.s_open[1]==''){
          callback(new Error('请选择景点每天开放时间'));
        }else{
          callback();
        }
      };
      var validate2 = (rule, value, callback) => {
        if(this.ruleForm.s_week[0]=='' || this.ruleForm.s_week[1]==''){
          callback(new Error('请选择景点每周开放时间'));
        }else{
          callback();
        }
      };
      var validate3 = (rule, value, callback) => {
        if(this.ruleForm.s_month[0]=='' || this.ruleForm.s_month[1]==''){
          callback(new Error('请选择景点每年开放时间'));
        }else{
          callback();
        }
      };
      return{
        ruleForm:{
          s_name:'',
          s_title:'',
          s_icon:'',
          s_content:'',
          s_open:['',''],
          s_week:['',''],
          s_month:['',''],
          s_ticket:null,
          s_addressId:[],
          s_addressName:['','',''],
          s_address:''
        },
        rules:{
          s_name:[
            { required: true, message: '请输入景点名称', trigger: 'blur' },
            { min: 1, message: '请输入景点名称', trigger: 'blur' }
          ],
          s_title:[
            { required: true, message: '请输入景点标题', trigger: 'blur' },
            { min: 1, message: '请输入景点名称', trigger: 'blur' }
          ],
          s_content:[
            { required: true, message: '请输入景点内容', trigger: 'blur' },
            { min: 1, message: '请输入景点名称', trigger: 'blur' }
          ],
          s_icon:[
            { required: true, message: '请上传景点图片', trigger: 'blur' },
            { min: 1, message: '请上传景点图片', trigger: 'blur' }
          ],
          s_open:[
            { type: 'array', required: true, message: '请选择景点每天开放时间', trigger: 'blur' },
            { validator: validate, trigger: 'blur' }
          ],
          s_week:[
            { type: 'array', required: true, message: '请选择景点每周开放时间', trigger: 'blur' },
            { validator: validate2, trigger: 'blur' }
          ],
          s_month:[
            { type: 'array', required: true, message: '请选择景点每年开放时间', trigger: 'blur' },
            { validator: validate3, trigger: 'blur' }
          ],
          s_addressId:[
            { type: 'array', required: true, message: '请选择景点地址', trigger: 'blur' }
          ],
          s_address:[
            { required: true, message: '请输入景点详细地址', trigger: 'blur' },
            { min: 1, message: '请输入景点详细地址', trigger: 'blur' }
          ]
        },
        id:null,
        url:'',
        week:['周一','周二','周三','周四','周五','周六','周日'],
        options:area
      }
    },methods:{
      onLoad:function(){
        var that=this

        this.$axios.post('/admin.php/scenic/edit_row',this.$qs.stringify({id:this.id})).then(
          (res)=>{
            if(res.data.code==1){
              that.ruleForm=res.data.data.row;

              that.$notify({
                title: '成功',
                message: '加载成功',
                type: 'success'
              });
            }else{
              that.$notify.info({
                title: '消息',
                message: res.data.msg
              });
            }
          }
        ).catch(
          (res)=>{
            that.$notify({
              title: '警告',
              message: '网络繁忙',
              type: 'warning'
            });
          }
        )
      },
      goBack:function(){
        this.$router.push({path:'/admin/scenic'});
      },
      handleAvatarSuccess:function(res, file){
        if(res.code==1){
          this.ruleForm.s_icon=res.data.src;

          this.$message({
            type:'success',
            message:'上传成功'
          })
        }
      },
      beforeAvatarUpload:function(file){
        var type=file.type
        var size=file.size/1024/1024 <3

        var type_arr=['image/jpeg','image/jpg','image/png','image/gif'];

        if(type_arr.indexOf(type)<0){
          this.$message.error('请上传图片类型!');

          return false;
        }

        if(!size){
          this.$message.error('上传图片大小不能超过 3MB!');

          return false;
        }
      },
      handleChange:function(name){
        this.ruleForm.s_addressName=this.$refs.myarea.getCheckedNodes()[0].pathLabels
        console.log(this.ruleForm.s_addressName)
      },
      onSubmit:function(formName){
        this.$refs[formName].validate((valid) => {
          if (valid) {
            var that=this

            this.$axios.post('/admin.php/scenic/edit_btn',this.$qs.stringify(this.ruleForm)).then(
              (res)=>{
                if(res.data.code==1){
                  that.$notify({
                    title: '成功',
                    message: '提交成功',
                    type: 'success'
                  });

                  setTimeout(function(){that.$router.push({path:'/admin/scenic'});},1300);
                }else{
                  that.$notify.info({
                    title: '消息',
                    message: res.data.msg
                  });
                }
              }
            ).catch(
              (res)=>{
                that.$notify({
                  title: '警告',
                  message: '网络繁忙',
                  type: 'warning'
                });
              }
            )
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      }
    },created(){
      this.id=typeof(this.$route.query.id)
      //前台
      this.url=process.env.API_ROOT+'/upload/scenic'

      if(this.id!='undefined'){
        this.id=this.$route.query.id

        this.onLoad();
      }
    }
  }
</script>

<style>
  .form{
    width:800px;
  }
  .avatar-uploader .el-upload {
      border: 1px dashed #d9d9d9;
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
      border-color: #409EFF;
    }
    .avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 250px;
      height: 178px;
      line-height: 178px;
      text-align: center;
      background-color: #fff;
    }
    .avatar {
      width: 250px;
      height: 178px;
      display: block;
    }
</style>
